<template>
    <!--html代码-->
<ul>
    <li v-for="item in data">{{item.content}}</li>

</ul>
<button @click="editData">点击添加</button>
<button @click="editData">点击删除</button><br>
<input v-model="msg">
<p>{{ msg }}</p>
<button @click="changeMsg">点击修改</button>

</template>
<script setup lang="ts">
import { ref } from 'vue';

//任务项
let data = ref([
    {id: 1, content: '任务1', completed: false},
    {id: 2, content: '任务2', completed: false},
    {id: 3, content: '任务3', completed: false}
]);
//
function editData() {

    data.value.push({id: 4, content: '任务4', completed: false})

    data.value.splice(0,1)
}

let msg = ref('hello world')
function changeMsg() {
    msg.value = 'hello vue'
}

</script>
<style>
h1{
    font-size: 40px;
    font-weight: bold;
    color: rgb(255, 251, 0);
}
li{
    font-size: 20px;
    font-weight: bold;
    color: rgb(2, 255, 44);
}
</style>